<template>
  <div class="file-preview">
    <video-preview-dialog :visible.sync="videoPreviewVisible" :player-options="playerOptions"></video-preview-dialog>
  </div>
</template>

<script>
import VideoPreviewDialog from './VideoPreviewDialog.vue'
import { downloadFile } from '@api/api.js'
import { FILE_PREVIEW_TYPE } from '@utility/dict'
import { unifyPreviewData } from './controller'
export default {
  name: 'FilePreview',
  components: { VideoPreviewDialog },
  props: {},
  data() {
    return {
      videoPreviewVisible: false,
      playerOptions: {
        language: 'zh-CN',
        aspectRatio: '16:9',
        fluid: true,
        sources: [
          {
            type: 'video/mp4',
            src: '',
          },
        ],
        poster: '',
        autoplay: false,
        controls: true,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    previewFile(item, imgUrls) {
      item = unifyPreviewData(item)
      if (item.previewType === FILE_PREVIEW_TYPE.img) {
        if (imgUrls?.length > 0) {
          const previewIdx = imgUrls.findIndex(img => img === item.previewPath)
          this.previewImg(imgUrls, previewIdx)
        } else {
          this.previewImg([item.previewPath], 0)
        }
      } else if (item.previewType === FILE_PREVIEW_TYPE.video) {
        this.previewVedio(item)
      } else if (item.previewType === FILE_PREVIEW_TYPE.doc) {
        this.previewDoc(item)
      }
    },
    // 预览图片
    previewImg(imgList, idx = 0) {
      console.log('%c⧭', 'color: #00736b', imgList)
      this.$viewerApi({
        images: imgList,
        options: {
          initialViewIndex: idx,
          // title: [1, (image, imageData) => `${image.alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`],
        },
      })
    },
    // 预览视频
    previewVedio(fileItem) {
      this.playerOptions.sources[0].src = fileItem.previewPath
      this.playerOptions.poster = fileItem.thumbnailPath
      this.videoPreviewVisible = true
    },
    // 查看 document
    previewDoc(fileItem) {
      const routeData = this.$router.resolve({
        name: 'PDF_PAGE',
        query: {
          url: fileItem.previewPath,
        },
      })
      window.open(routeData.href, '_blank')
    },
    // 下载
    downloadFile(fileItem) {
      downloadFile(fileItem.id)
    },

    deleteFile(cb) {
      this.$confirm('确定要删除该文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          cb && cb()
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped>
.file-preview {
}
</style>
